<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import { debounce } from '@/utils'
import echarts from 'echarts'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData:{
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      chart: null,
      dataA:[
        ['1', 0],
        ['2', 0],
        ['3', 0],
        ['4', 0],
        ['5', 100],
        ['6', 1200],
        ['7', 71.5],
        ['8', 0],
        ['9', 0],
        ['10', 0],
        ['11', 0],
        ['12', 0]
      ],
      dataB:[
        ['1', 0],
        ['2', 0],
        ['3', 0],
        ['4', 0],
        ['5', 0],
        ['6', 0],
        ['7', 0],
        ['8', 0],
        ['9', 0],
        ['10', 0],
        ['11', 0],
        ['12', 0],
        ['13', 0],
        ['14', 0],
        ['15', 0],
        ['16', 0],
        ['17', 0],
        ['18', 0],
        ['19', 0],
        ['20', 0],
        ['21', 0],
        ['22', 0],
        ['23', 0],
        ['24', 0],
        ['25', 0],
        ['26', 0],
        ['27', 0],
        ['28', 0],
        ['29', 0],
        ['30', 0],
        ['31', 0]
      ]
    }
  },
  watch: {
    "chartData": {
      handler(newVal, oldVal){
        console.log("newVal",newVal.chartDataB)
        this.dataA = []
        const _this = this
        newVal.chartDataB.forEach(function(obj) {
          _this.dataA.push([obj.work_month,obj.work_area])
        })

        this.dataB = []
        newVal.chartDataC.forEach(function(obj) {
          _this.dataB.push([obj.work_day,obj.work_area])
        })

        this.initChart()
      }
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'dark')
      var data = this.dataA
      var data1 = this.dataB
      var dateList = data.map(function(item) {
        return item[0]
      })
      var valueList = data.map(function(item) {
        return item[1]
      })
      var dateList1 = data1.map(function(item) {
        return item[0]
      })
      var valueList1 = data1.map(function(item) {
        return item[1]
      })

      this.chart.setOption({
        backgroundColor: 'transparent',
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1
          }
        ],
        title: [
          {
            left: 'center',
            text: '今年农机数据统计',
            textStyle: {
              color: '#fff',
              fontWeight: 'bold',
              fontSize: 12
            }
          },
          {
            top: '55%',
            left: 'center',
            text: '本月农机数据统计',
            textStyle: {
              color: '#fff',
              fontWeight: 'bold',
              fontSize: 12
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: params => `
            时间：${params[0].axisValue}${params[0].seriesIndex ? '日' : '月'}
            <br />
            ${params[0].marker} 作业总面积: ${params[0].data} 亩
          `
        },
        xAxis: [
          {
            data: dateList,
            name: '月',
            nameGap: 5
          },
          {
            gridIndex: 1,
            data: dateList1,
            name: '日',
            nameGap: 5
          }
        ],
        yAxis: [
          {
            splitLine: { show: false },
            name: '亩'
          },
          {
            splitLine: { show: false },
            name: '亩',
            gridIndex: 1
          }
        ],
        legend: {
          show: true,
          data: [{ name: '今年农机数据统计', icon: 'rect' }, { name: '本月农机数据统计', icon: 'rect' }]
        },
        grid: [
          {
            top: 40,
            bottom: '58%',
            left: 50,
            right: 20
          },
          {
            top: '58%',
            bottom: 40,
            left: 50,
            right: 20
          }
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList,
            smooth: true, // 设置折线为圆滑曲线,false则有转折点
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#c24b5a',
                  width: 2
                }
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(180,67,99,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(50,24,126,1)'
                }
              ])
            }
          },
          {
            type: 'line',
            showSymbol: false,
            data: valueList1,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#c24b5a',
                  width: 2
                }
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(180,67,99,1)'
                },
                {
                  offset: 1,
                  color: 'rgba(50,24,126,1)'
                }
              ])
            },
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      })
    }
  }
}
</script>
